<template>
<view>
<u-popup :show="authType" position="bottom" @close="cancel" :customStyle="{height:'200px',width:'100%',flex:'auto'}">
  <view class="authContent">
    <view class="authContent__top">授权手机号可继续当前操作</view>
    <!-- <button v-if="!canIUseGetUserProfile" open-type="getUserInfo" @getuserinfo="getUserInfo" class="authContent__button">
      <m-icon name="icon75" size="22px" style="margin-right:5px;margin-top:2px"></m-icon>
      立即登录
    </button>
    <button v-else @tap="getUserProfile" class="authContent__button">
      <m-icon name="icon75" size="22px" style="margin-right:5px;margin-top:2px"></m-icon>
      立即登录
    </button> -->
    <button open-type="getPhoneNumber" @getphonenumber="getphonenumber" class="authContent__button">
      <m-icon name="icon75" size="22px" style="margin-right:5px;margin-top:2px"></m-icon>授权手机号
    </button>
    <view class="authContent__noContent" @tap="cancel">暂不授权</view>
  </view>
</u-popup>
</view>
</template>
<script lang='ts'>
import { Component, Vue,Prop } from 'vue-property-decorator'

@Component
export default class Auth extends Vue {
    @Prop()
    authType:boolean
    @Prop()
    state:string
    canIUseGetUserProfile:boolean=false
    mounted(){
    this.$store.commit("settingStore/setTabVisible",!this.authType);
        // if (uni.getUserProfile) {
        //     this.canIUseGetUserProfile=true
        // }
    }
    
  /**
   * 取消授权
   */
  cancel() {
    const state = this.state;
    if (state === "home") {
      this.$emit("getLocation", false);
    }
    if (state === "me") {
      this.$emit("cancel", false);
    }
    this.$emit("authClick",{})
  }
  //  async getUserInfo({ detail }) {
  //   if (!detail.rawData) {
  //     // 拒绝授权
  //     // wxp.redirectTo({ url: "/pages/index/index" });
  //     return;
  //   } else {
  //     detail.userInfo.nikeName = detail.userInfo.nickName;
  //     await this.$store.dispatch("userStore/updateUser",detail.userInfo)
  //     this.$emit("authClick", {});
  //   }
  //   const state = this.state;
  //   if (state === "me") {
  //     detail.userInfo.nikeName = detail.userInfo.nickName;
  //     this.$emit("getNew", detail.userInfo);
  //   }

  //   if (state === "select") {
  //     this.$emit("getNew", {});
  //   }
  // }

  // async getUserProfile() {
  //   uni.getUserProfile({
  //     desc: "用于完善会员资料", // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
  //     success: async (detail:any) => {
  //       if (!detail.rawData) {
  //         // 拒绝授权
  //         // wxp.redirectTo({ url: "/pages/index/index" });

  //         return;
  //       } 
  //       else {
  //         detail.userInfo.nikeName = detail.userInfo.nickName;
  //         await this.$store.dispatch("userStore/updateUser",detail.userInfo)
  //         this.$emit("authClick", {}, {});
  //       }
  //       const state = this.state;
  //       if (state === "me") {
  //         detail.userInfo.nikeName = detail.userInfo.nickName;
  //         this.$emit("getNew", detail.userInfo, {});
  //       }

  //       if (state === "select") {
  //         this.$emit("getNew", {}, {});
  //       }
  //     },
  //   });
  // }
  getphonenumber(e){
    try{
      this.$store.dispatch("userStore/getCode").then(()=>{
        this.$store.dispatch("userStore/login",{type:1,detail:e.detail}).then(()=>{
        this.$emit("getNew", {}, {});
        this.$emit("cancel")
        })
      }) 
    }catch{
      this.$Popup.toast("授权失败")
    }
  }
}
</script>
<style lang="scss" scoped>
@include b(authContent) {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;

    @include e(top) {
        height: 84rpx;
        width: 100%;
        display: flex;
        justify-content: center;
        padding-top: 40rpx;
        font-size: 30rpx;
    }

    @include e(button) {
        border-radius: 100rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 60rpx;
        width: 80%;
        height: 90rpx;
        background-color: #FB5362;
        color: white;
        font-size: 30rpx;
    }

    @include e(noContent) {
        font-size: 30rpx;
        width: 400rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 40rpx;
    }
}
</style>